<template>
<div>
  <div class="mdui-chip" style="margin-left: 16px;margin-top: 16px;margin-bottom: 16px" v-on:click="change_mode(1)">
    <span class="mdui-chip-title">添加时间正序</span>
  </div>
  <div class="mdui-chip" style="margin-left: 16px;margin-top: 16px;margin-bottom: 16px" v-on:click="change_mode(2)">
    <span class="mdui-chip-title">添加时间倒序</span>
  </div>
  <div class="mdui-chip" style="margin-left: 16px;margin-top: 16px;margin-bottom: 16px" v-on:click="change_mode(3)">
    <span class="mdui-chip-title">库存正序</span>
  </div>
  <div class="mdui-chip" style="margin-left: 16px;margin-top: 16px;margin-bottom: 16px" v-on:click="change_mode(4)">
    <span class="mdui-chip-title">库存倒序</span>
  </div>
  <div class="mdui-chip" style="margin-left: 16px;margin-top: 16px;margin-bottom: 16px" v-on:click="change_mode(5)">
    <span class="mdui-chip-title">权重正序</span>
  </div>
  <div class="mdui-chip" style="margin-left: 16px;margin-top: 16px;margin-bottom: 16px" v-on:click="change_mode(6)">
    <span class="mdui-chip-title">权重倒序</span>
  </div>
  <div class="mdui-table-fluid">

    <table class="mdui-table mdui-table-hoverable">
      <thead>
      <tr>

        <th>商品封面</th>
        <th>商品名称</th>
        <th>商品状态</th>
        <th>商品库存</th>
        <th>商品权重</th>
        <th>添加时间</th>
      </tr>
      </thead>
      <tbody>

      <tr v-for="(item) in data" v-on:click="goEdit(item)">
        <td><img :src="get_image(item.商品封面)" width="50px"></td>
        <td>{{item.商品名称}}</td>
        <td>{{item.商品状态}}</td>
        <td>{{item.商品库存}}</td>
        <td>{{item.商品权重}}</td>
        <td>{{item.添加时间}}</td>
      </tr>




      </tbody>
    </table>
    <div class="mdui-dialog" id="commodity_list_dialog">
      <div class="mdui-dialog-title">分类编辑</div>
      <div class="mdui-dialog-content">
        <div class="mdui-textfield">
          <label class="mdui-textfield-label">分类名称</label>
          <input class="mdui-textfield-input" type="text" v-model="name"/>
        </div>
        <div class="mdui-textfield">
          <label class="mdui-textfield-label">分类权重</label>
          <input class="mdui-textfield-input" type="text" v-model="weight"/>
        </div>

      </div>
      <div class="mdui-dialog-actions">
        <button class="mdui-btn mdui-ripple" v-on:click="update()">确定</button>
      </div>

    </div>


  </div>
</div>
</template>

<script>
  import * as mdui from "mdui";
  import axios from "axios";
  import qs from "qs";
  import jm from "./../../static/jm"

  const BASE_URL = 'http://127.0.0.1:8886';

  export default {
    name: 'login',
    data () {
      return {
        token: '',
        data:[],
        name:'',
        weight:'',
        sort_id:'',
        inst:'',
        mode:1
      }
    },
    methods:{
      getpar(par){
        //获取当前URL
        let local_url = document.location.href;
        //获取要取得的get参数位置
        let get = local_url.indexOf(par + "=");
        if (get == -1) {
          return "";
        }
        //截取字符串
        let get_par = local_url.slice(par.length + get + 1);
        //判断截取后的字符串是否还有其他get参数
        let nextPar = get_par.indexOf("&");
        if (nextPar != -1) {
          get_par = get_par.slice(0, nextPar);

        }
        nextPar = get_par.indexOf("?");
        if (nextPar != -1) {
          get_par = get_par.slice(0, nextPar);
        }
        nextPar = get_par.indexOf("#");
        if (nextPar != -1) {
          get_par = get_par.slice(0, nextPar);
        }
        return decodeURI(get_par);
      },
     change_mode(mode){
        this.mode=mode;
        this.getdata();

      },
      get_image(id){
        return BASE_URL+"/images/small/"+id+".jpg";

      },
      goEdit(item){
        this.$router.push("/commodity_list_edit#id="+item.商品id);

      },
      update(){
        this.token=window.localStorage.getItem("token");
        axios.post(BASE_URL +'/sort/change_sort',
          qs.stringify({token:this.token,id:this.sort_id,name:this.name,weight:this.weight}),
          {'headers': {'Content-Type': 'application/x-www-form-urlencoded'}})
          .then(re => {
            if(re.data.状态码===200)
            {



              this.inst.close();
              this.getdata();

            }
            else
            {
              this.inst.close();
              if(re.data.备注==='token无效') {
                this.token = window.localStorage.setItem("token", "");
                this.$router.push("/login");
              }
              else
                mdui.default.alert(re.data.备注);
            }
          })
          .catch(err=>{
            this.inst.close();
            mdui.default.alert("网络错误");

          });
      },
      getdata(){
        this.token=window.localStorage.getItem("token");
        axios.post(BASE_URL +'/commodity/admin_get_commodity_list',
          qs.stringify({token:this.token,mode:this.mode,start:0,coum:1000}),
          {'headers': {'Content-Type': 'application/x-www-form-urlencoded'}})
          .then(re => {
            if(re.data.状态码===200)
            {

              this.data=re.data.列表;

            }
            else
            {
              if(re.data.备注==='token无效') {
                this.token = window.localStorage.setItem("token", "");
                this.$router.push("/login");
              }
              else
                mdui.default.alert(re.data.备注);
            }
          })
          .catch(err=>{
            mdui.default.alert("网络错误");

          });
      }
    },
    mounted() {
      this.token=window.localStorage.getItem("token");
      if(this.token!=null&&this.token.length==64) {
        this.inst = new mdui.default.Dialog('#commodity_list_dialog');
        this.getdata();
      }
    }
  }
</script>
